import { generateId } from '@/utils/util'


export default class CreatWpsView {
  dom: Element;
  wpsId: any;
  sdkUrl: string;
  instance: any;
  config: any;
  parentClassName: string;
  /**
   * 构造函数
   *
   * @param dom DOM元素
   * @param wpsId WPS ID
   * @param sdkUrl SDK URL
   * @param config 配置项，可选
   * @param parentClassName 父级元素的类名，可选
   */
  constructor(dom: Element, wpsId: string, sdkUrl: string, config?: any, parentClassName?: string) {
    this.dom = dom;
    this.wpsId = wpsId;
    this.sdkUrl = sdkUrl;
    this.config = config;
    this.parentClassName = parentClassName;
  }

  /**
   * 创建 shadow DOM
   *
   * @returns 返回一个 Promise 对象，解析为 shadow DOM 对应的 window 对象
   */
  public creatShadowDOM() {
    return new Promise<any>(async (resolve, reject) => {
      if (!this.dom) {
        reject(new Error('DOM element is not defined.'));
        return;
      }
      await this.removeElementIfHasChildren(this.dom, this.wpsId);

      // 使用closest函数查找最近的祖先元素，该元素具有指定的类名
      const parentClassName = this.parentClassName ? this.parentClassName : '.el-form';
      var closestParent = this.dom.closest(parentClassName);
      // 获取父元素的高度
      const wpsClientHeight = closestParent.clientHeight;
      // 创建一个 shadow root
      const shadowRoot = this.dom.shadowRoot ? this.dom.shadowRoot : this.dom.attachShadow({ mode: 'open' });
      // 在 shadow root 中创建 script 元素
      const script = document.createElement('script');
      script.src = '/wpsOffice/web-office-sdk-v1.1.19.umd.js'; // 指定脚本文件的路径
      script.async = true; // 如果需要的话，设置脚本异步加载
      // 将 script 元素添加到 shadow root
      shadowRoot.appendChild(script);

      // 确保脚本在 shadow root 加载和执行
      script.onload = async () => {
        console.log('Shadow DOM 脚本已加载并执行');
        await this.createView(shadowRoot, this.sdkUrl, wpsClientHeight);
        resolve(window[this.wpsId]);
      };

      // 监听脚本加载错误
      script.onerror = (error) => {
        console.error('Shadow DOM 脚本加载错误:', error);
        reject(error);
      };

      const officeStyle = document.createElement('style');
      officeStyle.textContent = `
        .form-detail {
          display: flex;
          align-items: center;
          flex-direction: column;
          background: #eeeeef;
          padding-right: 0;
          height: 100%;
          overflow: hidden;
          width: 100%;
        }
        .office-container {
          width: 100%;
          background: #ffffff;
        }
        .el-scrollbar__view {
          height: 100%;
        }
        .el-scrollbar__view .form-wps {
          width: 100%;
          height: 100%;
        }
      `;
      shadowRoot.appendChild(officeStyle);
    });
  }

  /**
   * 创建视图
   *
   * @param shadowDom 影子DOM
   * @param sdkUrl SDK地址
   * @param creatViewHeight 视图高度
   * @returns Promise<void>
   */
  public async createView(shadowDom: any, sdkUrl: string, creatViewHeight: number) {
    // 创建一个 script 元素用于加载 SDK
    const srciptSdk = document.createElement('script');

    // 创建一个 div 元素作为 Office 容器
    const officeDom = document.createElement('div');
    // 设置 Office 容器的 class 属性
    officeDom.setAttribute('class', 'form-detail')

    // 生成一个唯一的 ID 用于标识 Office 容器
    const idR = "office" + generateId();
    // 设置 Office 容器的 ID 属性
    officeDom.id = idR;

    // 将 Office 容器添加到 shadowDom 中
    shadowDom.appendChild(officeDom);

    // 设置 script 元素的文本内容为 SDK 的配置代码
    srciptSdk.textContent = `
          // 配置 OpenSDK 对象，将其挂载到 Office 容器中
          window.${this.wpsId} = WebOfficeSDK.config({
            // SDK 的 URL
            url: '${sdkUrl}',
            // 挂载的 DOM 元素，即 Office 容器
            mount: document.getElementById('${this.wpsId}').shadowRoot.getElementById('${idR}'),
            // 文字自定义配置
            wordOptions: {
              isShowDocMap: false, // 是否开启目录功能，默认开启
              mobile: {
                isOpenIntoEdit: false, // （Mobile）要有编辑权限，移动端打开时是否进入编辑
              }
            },
            // 自定义的命令栏
            commandBars: [
              {
                // 命令栏的 ID
                cmbId: "FloatQuickHelp", // 右下角帮助（金小獴）
                // 命令栏的属性设置
                attributes: {
                  // 隐藏命令栏
                  visible: false, // 隐藏组件
                  // 禁用命令栏（组件显示但不响应点击事件）
                  enable: false, // 禁用组件（组件显示但不响应点击事件）
                },
              },
            ],
          });
          // 设置 Office 容器的高度
          document.getElementById('${this.wpsId}').shadowRoot.getElementById('${idR}').style.height = '${creatViewHeight - 20}px';
          // 设置 SDK 的 iframe 高度
          window.${this.wpsId}.iframe.style.height = '${creatViewHeight - 30}px';
          try{
            if("${this.parentClassName}" !== ".file_preview_divs"){
              let timeClear = setInterval(function() {
                if((!document.getElementById('${this.wpsId}') || !document.getElementById('${this.wpsId}').shadowRoot.getElementById('${idR}')) && timeClear){
                  clearInterval(timeClear);
                  timeClear = null;
                }else{
                  let officeIframe = document.getElementById('${this.wpsId}').shadowRoot.getElementById('${idR}').getElementsByClassName("web-office-iframe")[0];
                  // 设置 Office 容器的高度
                  
                  document.getElementById('${this.wpsId}').shadowRoot.getElementById('${idR}').style.height = document.getElementById('${this.wpsId}').clientHeight - 10 + 'px';
                  // 设置 SDK 的 iframe 高度
                  window.${this.wpsId}.iframe.style.height = document.getElementById('${this.wpsId}').clientHeight - 10 + 'px';
                  officeIframe && (officeIframe.style.width = 99 + "%") && (officeIframe.style.height = (document.getElementById('${this.wpsId}').clientHeight - 10) + 'px');
                }
              }, 500);
            }
          }catch(err){
            // 捕获并打印异常信息
            console.log(err)
          }
        `

    // 将 script 元素添加到 shadowDom 中，以执行 SDK 的配置代码
    shadowDom.appendChild(srciptSdk);
  }


  public removeElementIfHasChildren(element: any, wpsId: string) {
    if (element.shadowRoot) {
      if (window[wpsId].destroy) {
        window[wpsId].destroy();
      }
      element.shadowRoot.innerHTML = '';
      window[wpsId] = null;
    }

    Object.keys(window).forEach((key) => {
      if (key.indexOf('wps_word') === 0 || key.indexOf('wps_pdf') === 0) {
        if (document.querySelectorAll('#' + key).length === 0 && window[key]) {
          window[key].destroy();
          window[key] = null;
          delete window[key];
        }
      }
    });
  }

}